<template>
	<view class="busin-container">
		<view>
			<template slot="label">
				<p>公积金贷款金额</p>
			</template>
			<template slot="input">
				<view class="input-class">
					<input class="uni-input" v-model="form.grand" type="number" maxlength="10" placeholder="请输入公积金贷款金额" />
					<view class="">万元</view>
				</view>
			</template>
		</view>
		<view>
			<template slot="label">
				<p>商业贷款金额</p>
			</template>
			<template slot="input">
				<view class="input-class">
					<input class="uni-input" v-model="form.amount" type="number" maxlength="10" placeholder="请输入商业贷款金额" />
					<view class="">万元</view>
				</view>
			</template>
		</view>
		<view>
			<template slot="label">
				<p>贷款年限</p>
			</template>
			<template slot="input">
				<view class="option" style="position: relative;">
					<picker @change="yearBindPickerChange" :value="yearIndex" :range="yearArray" range-key="name">
						<view style="padding: 20rpx 60rpx;background-color: white;">{{ yearArray[yearIndex].name }}</view>
					</picker>
					<view class="ico_down" style="position: absolute;right: 20rpx; top: 40%;"></view>
				</view>
				<!-- <i class='iconfont icon-xiala'></i> -->
			</template>
		</view>
		<view>
			<template slot="label">
				<p>公积金利率</p>
			</template>
			<template slot="input">
				<view class="option" style="position: relative;">
					<picker @change="grandBindPickerChange" :value="rateIndex" :range="rateList" range-key="value">
						<view style="padding: 20rpx 60rpx;background-color: white;">{{ rateList[rateIndex].value }}</view>
					</picker>
					<view class="ico_down" style="position: absolute;right: 20rpx; top: 40%;"></view>
				</view>
			</template>
		</view>
		<view class="dengyu">= {{ form.grandRate }} %</view>
		<view>
			<template slot="label">
				<p>商贷利率方式</p>
			</template>
			<template slot="input">
				<radio-group @change="radioRateChange">
					<label style="margin-right: 30rpx;" v-for="(item, index) in rateArr" :key="item.value">
						<radio style="transform: scale(0.8);color: #2295FF !important;" :value="item.value" :checked="index === current" />
						<text class="radio-class">{{ item.name }}</text>
					</label>
				</radio-group>
			</template>
		</view>
		<view v-if="form.rate === '1'">
			<template slot="label">
				<p>商贷利率</p>
			</template>
			<template slot="input">
				<view class="option" style="position: relative;">
					<picker @change="loanBindPickerChange" :value="loanIndex" :range="loanList" range-key="value">
						<view style="padding: 20rpx 60rpx;background-color: white;">{{ loanList[loanIndex].value }}</view>
					</picker>
					<view class="ico_down" style="position: absolute;right: 20rpx; top: 40%;"></view>
				</view>
			</template>
		</view>
		<view class="content" v-else>
			<view class="left-label">商贷利率</view>
			<view class="right-form">
				<view class="right-form-rate">
					<view class="right-form-rate-left">LPR</view>
					<view class="right-form-rate-right">
						<input class="uni-input" @input="LprInput" v-model="form.lpr" type="number" maxlength="10" />
						<view class="">%</view>
					</view>
				</view>
				<view class="right-form-rate">
					<view class="right-form-rate-left">基点</view>
					<view class="right-form-rate-right">
						<input class="uni-input" @input="pointInput" v-model="form.point" type="number" maxlength="10" />
						<view class="">‱</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dengyu" v-if="form.rate === '1'">= {{ form.rateNum }} %</view>
		<view class="dengyu" v-else>= {{ form.rateLpr }} %</view>
	</view>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			rateList: [
				{
					key: 1,
					value: '基准利率(3.25%)'
				},
				{
					key: 0.7,
					value: '基准利率7折'
				},
				{
					key: 0.85,
					value: '基准利率85折'
				},
				{
					key: 0.88,
					value: '基准利率88折'
				},
				{
					key: 0.9,
					value: '基准利率9折'
				},
				{
					key: 0.95,
					value: '基准利率95折'
				},
				{
					key: 1.05,
					value: '基准利率1.05倍'
				},
				{
					key: 1.1,
					value: '基准利率1.1倍'
				},
				{
					key: 1.2,
					value: '基准利率1.2倍'
				},
				{
					key: 1.3,
					value: '基准利率1.3倍'
				}
			],
			loanList: [
				{
					key: 1,
					value: '基准利率(4.9%)'
				},
				{
					key: 0.7,
					value: '基准利率7折'
				},
				{
					key: 0.85,
					value: '基准利率85折'
				},
				{
					key: 0.88,
					value: '基准利率88折'
				},
				{
					key: 0.9,
					value: '基准利率9折'
				},
				{
					key: 0.95,
					value: '基准利率95折'
				},
				{
					key: 1.05,
					value: '基准利率1.05倍'
				},
				{
					key: 1.1,
					value: '基准利率1.1倍'
				},
				{
					key: 1.2,
					value: '基准利率1.2倍'
				},
				{
					key: 1.3,
					value: '基准利率1.3倍'
				}
			],
			yearArray: [],
			yearIndex: 19,
			index: 5,
			rateIndex: 0,
			loanIndex: 0,
			amount: 33.4,
			form: {
				// 计算方式
				rate: '1',
				// 公积金贷款金额
				grand: '',
				// 商贷金额
				amount: '',
				// 年限
				years: 240,
				// 公积金基准利率 显示参数
				grandRate: 3.25,
				// 公积金基准利率
				grandRateShow: 0.0325,
				// 商贷基准利率 显示利率
				rateNum: 0.49,
				// 商贷基准利率
				baseRate: 0.049,
				// lpr显示利率
				rateLpr: 4.65,
				// lpr 利率
				lpr: 4.65,
				// 基点
				point: null
			},
			rateArr: [
				{
					value: '1',
					name: '基准利率'
				},
				{
					value: '2',
					name: 'LRP基础利率'
				}
			],
			current: 0
		};
	},
	watch: {
		form: {
			handler: function(newvalue) {
				console.log(newvalue);
			},
			deep: true //deep置为true表示：对象中任一属性值发生变化，都会触发handler中的方法
		}
	},
	created() {
		for (let i = 1; i <= 30; i++) {
			this.yearArray.push({
				key: i * 12,
				name: `${i}年`
			});
		}
	},
	onLoad() {},
	methods: {
		submit() {
			if (this.ruls()) {
				const obj = {
					sloanMoney: this.form.amount,
					gloanMoney: this.form.grand,
					smonths: this.form.years,
					gmonths: this.form.years,
					srate: this.form.rate === '1' ? this.form.baseRate : Number(this.form.rateLpr) / 100,
					grate: this.form.grandRateShow
				};
				this.$emit('submit', obj, 1);
			}
		},
		ruls() {
			if (!this.form.grand) {
				uni.showToast({
					title: '请输入公积金贷款金额',
					icon: 'none'
				});
				return false;
			}
			if (!this.form.amount) {
				uni.showToast({
					title: '请输入商贷贷款金额',
					icon: 'none'
				});
				return false;
			}
			return true;
		},
		// lpr
		LprInput(val) {
			console.log(Number(val.detail.value), 'Lpr');
		},
		//  基点
		pointInput(val) {
			if (this.form.lpr) {
				this.form.rateLpr = (this.form.lpr + Number(val.detail.value) / 100).toFixed(2);
			} else {
				this.form.rateLpr = (Number(val.detail.value) / 100).toFixed(2);
			}
		},
		// 计算方式勾选事件
		radioRateChange(val) {
			this.form.rate = val.detail.value;
		},
		// 贷款年限切换事件
		yearBindPickerChange(e) {
			this.yearIndex = e.detail.value;
			this.form.years = this.yearArray[e.detail.value].key;
		},
		// 公积金基准利率
		grandBindPickerChange(e) {
			this.form.grandRateShow = 0.0325 * this.rateList[e.detail.value].key;
			this.form.grandRate = (0.0325 * this.rateList[e.detail.value].key * 100).toFixed(2);
			this.rateIndex = e.detail.value;
		},
		// 商贷基准利率
		loanBindPickerChange(e) {
			this.form.baseRate = 0.049 * this.rateList[e.detail.value].key;
			this.form.rateNum = (0.049 * this.rateList[e.detail.value].key * 100).toFixed(2);
			this.loanIndex = e.detail.value;
		}
	}
};
</script>

<style lang="scss" scoped>
.busin-container {
	min-height: 900rpx;
	background-color: #ffffff;
}

/deep/ .uni-radio-input {
	width: 24rpx;
	height: 24rpx;
}

.radio-class {
	font-size: 24rpx;
}

.input-class {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 10rpx;
	padding: 0 20rpx;
	height: 60rpx;
	min-width: 400rpx;
	background-color: #f1f1f1;
}

.ico_down {
	float: top;
	width: 0;
	height: 0;
	border: 12rpx solid transparent;
	border-top-color: #b0b0b0;
}

.content {
	display: flex;
	min-height: 100rpx;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		background-color: #979797;
		width: 90%;
		height: 1rpx;
		bottom: 0;
		transform: translate(-50%);
		left: 50%;
	}

	.left-label {
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}

	.right-form {
		width: 70%;
		// display: flex;
		// justify-content: flex-end;
		// align-items: center;
		font-size: 28rpx;
		padding-right: 35rpx;
	}
}

.right-form-rate {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;

	.right-form-rate-left {
		width: 40%;
		text-align: center;
	}

	.right-form-rate-right {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		height: 50rpx;
		padding: 0 20rpx;
		background-color: #f1f1f1;
	}
}

.dengyu {
	text-align: right;
	padding: 30rpx;
}
</style>
